<template>
	<skeleton v-if="!isLoading"></skeleton>
	<view v-else class="content">
		<!-- 商城部分 轮播图+广告位+商品列表 -->
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular autoplay interval="2000" duration="500" @change="onSwiperChange"
				previous-margin="50rpx" next-margin="50rpx">
				<swiper-item v-for="(item, index) in bannerList" :key="index">
					<image class="pic" :class="{ current: current === index }" :src="item.bannerUrl" mode="aspectFill"
						@click="bannerToGoods(index)"></image>
				</swiper-item>
			</swiper>
			<view class="dots row">
				<view class="dot" :class="{ current: current === index }" v-for="(item, index) in bannerList"
					:key="index"></view>
			</view>
		</view>
		<!-- 图片展示区 -->
		<image :src="StaticUrl + '/image/shop/img_adv0.png'" style="width: 727rpx;height: 185rpx;margin: 20rpx auto;" @click="test()">
		</image>
		<!-- 商品展示区 采用流式布局 L + R -->
		<view class="uni-product-list">
			<!-- 左边内容 -->
			<view class="uni-product-Item">
				<view class="uni-product" v-for="(product, index) in productListLeft" :key="index"
					@click="toGoodsDetail(0, index)">
					<image class="uni-product-image" :src="product.thumbnail"></image>
					<view class="uni-product-name">{{ product.name }}</view>
					<view class="uni-product-des">{{ product.description }}</view>
					<text class="uni-product-price-original">
						{{ product.price }}
						<text style="font-size: 20rpx;">/爱豆</text>
					</text>
				</view>
			</view>

			<!-- 右边内容 -->
			<view class="uni-product-Item">
				<view class="uni-product" v-for="(product, index) in productListRight" :key="index"
					@click="toGoodsDetail(1, index)">
					<image class="uni-product-image" :src="product.thumbnail"></image>
					<view class="uni-product-name">{{ product.name }}</view>
					<view class="uni-product-des">{{ product.description }}</view>
					<text class="uni-product-price-original">
						{{ product.price }}
						<text style="font-size: 20rpx;">/爱豆</text>
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import config from '@/config.js';
	import * as api from '@/api/login';
	import regular from '@/api/regular';
	import skeleton from '../../components/skeleton/skeleton_mall.vue'
	export default {
		components: {
			skeleton
		},
		data() {
			return {
				StaticUrl: '',
				isLoading: false,
				toShake: false,
				bannerList: [],
				current: 0,
				title: 'product-list',
				productListLeft: [], //左半边的数据
				productListRight: [], //右半边的数据
				renderImage: true,
				innerAudioContext: null,
				musSrc: '',
				audioAction: {
					method: 'play'
				}
			};
		},
		onLoad() {
			this.StaticUrl = config.StaticUrl;
			this.userId = this.$store.state.userInfo.currentUser.userId;
			this.getIndexBanner();
			this.getGoodsList();
		},
		onPullDownRefresh() {
			this.refreshData();
			let T = setTimeout(() => {
				clearTimeout(T);
				uni.stopPullDownRefresh();
			}, 2000);
		},
		methods: {
			test(){
				// this.requestAudio()
			},
			// 获取轮播图
			getIndexBanner() {
				let that = this;
				let userId = this.userId;
				let data = {
					userId: userId,
					action: 'getIndexBanner'
				};
				api.getIndexBanner(data).then(function(res) {
					// console.log('getIndexBanner success', res);
					if (res.data.code !== 2000) return;
					that.bannerList = res.data.data.bannerList;
				}).catch(function(error) {
					console.log('getIndexBanner fail', error);
				});
			},
			// 获取商品信息
			getGoodsList() {
				let that = this;
				let userId = this.userId;
				let data = {
					userId: userId,
					action: 'getDisplayGoodsList'
				};
				api.getGoodsList(data).then(function(res) {
					// console.log('getGoodsList success!', res);
					if (res.data.code === 2000) {
						res.data.data.goods.forEach((item, index) => {
							if (index % 2 === 0) {
								that.productListLeft.push(item);
							} else {
								that.productListRight.push(item);
							}
						});
						that.isLoading = true
					} else {
						that.$toast('加载商品失败!')
					}
				}).catch(function(error) {
					console.log('getGoodsList fail', error);
				});
			},
			// 轮播图自动切换事件监听
			onSwiperChange(e) {
				this.current = e.detail.current;
			},
			// 轮播图到商品页
			bannerToGoods(index) {
				let that = this;
				// console.log(JSON.stringify(that.bannerList[index].goodsCache));
				uni.navigateTo({
					url: 'goodsDetail/goodsDetail?content=' + JSON.stringify(that.bannerList[index].goodsCache)
				});
			},
			// 刷新数据
			refreshData() {
				this.productListLeft = [];
				this.productListRight = [];
				this.getGoodsList();
			},
			// 查看商品详情
			toGoodsDetail(item, index) {
				// console.log(this.productListLeft[index]);
				let that = this;
				if (item === 0) {
					uni.navigateTo({
						url: 'goodsDetail/goodsDetail?content=' + JSON.stringify(that.productListLeft[index])
					});
				} else {
					uni.navigateTo({
						url: 'goodsDetail/goodsDetail?content=' + JSON.stringify(that.productListRight[index])
					});
				}
			}
		}
	};
</script>

<style scoped lang="scss">
	@import url('../style/animation.css');

	page {
		background-color: #f5f5f5;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.uni-margin-wrap {
		position: relative;
		background-color: #fff;
	}

	.swiper {
		width: 750rpx;
		height: 310rpx;
		padding-top: 10rpx;
	}

	.swiper-item {
		width: 702rpx;
		height: 300rpx;
		/* margin: 0rpx 24rpx; */
		border-radius: 15rpx;
	}

	.pic {
		display: block;
		width: 100%;
		height: 100%;
		border-radius: 16rpx;
		transform: scale(0.94, 0.88);
		transition: transform 0.36s;

		&.current {
			transform: scale(1);
		}
	}

	.dots {
		position: absolute;
		left: 0;
		bottom: 12rpx;
		width: 100%;
	}

	.dot {
		width: 32rpx;
		height: 8rpx;
		margin: 0 6rpx;
		background-color: #fff;
		border-radius: 10px;

		&.current {
			background-color: $choice-color;
		}
	}

	.row {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	// 商品展示区
	view {
		font-size: 28rpx;
	}

	.uni-product-list {
		margin-top: 30rpx;
		padding-bottom: 30rpx;
		display: flex;
		width: 750rpx;
		justify-content: space-around;
		background-color: #f5f5f5;
	}

	.uni-product-Item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.uni-product {
		margin: 5rpx;
		padding: 15rpx;
		display: flex;
		flex-direction: column;
		background-color: #ffffff;
		border-radius: 15px;
	}

	.image-view {
		height: 330rpx;
		width: 330rpx;
		margin: 12rpx 0;
	}

	.uni-product-image {
		height: 330rpx;
		width: 330rpx;
	}

	//
	.uni-product-name,
	.uni-product-des {
		width: 300rpx;
		word-break: break-all; //如何在单词内断行
		display: -webkit-box;
		overflow: visible;
		line-height: 1.5;
		text-overflow: ''; //文本溢出处显示的内容
		-webkit-box-orient: vertical;
		// -webkit-line-clamp: 2; //将块容器中的内容限制为指定行数
	}

	.uni-product-name {
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #000000;
	}

	.uni-product-des {
		font-size: 22rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #000000;
		opacity: 0.5;
	}

	.uni-product-price {
		margin-top: 10rpx;
		font-size: 28rpx;
		line-height: 1.5;
		position: relative;
	}

	.uni-product-price-original {
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #ff2727;
	}

	.uni-product-price-favour {
		color: #888888;
		text-decoration: line-through;
		margin-left: 10rpx;
	}

	.uni-product-tip {
		position: absolute;
		right: 10rpx;
		background-color: #ff3333;
		color: #ffffff;
		padding: 0 10rpx;
		border-radius: 5rpx;
	}
</style>